<template>
  <div class="common-table" v-for="(item,index) in formObj" :key="index" :item="item">
    <div class="table-item" >
      <formItem title="名称">
        <template v-slot:rightText>
          <span>{{item.title}}</span>
        </template>
      </formItem>
      <formItem title="位置">
        <template v-slot:rightText>
          <span>{{item.location}}</span>
        </template>
      </formItem>
      <formItem title="面积">
        <template v-slot:rightText>
          <span>{{item.area}}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="区镇">
        <template v-slot:rightText>
          <span>{{item.town}}</span>
        </template>
      </formItem>
      <formItem title="类型">
        <template v-slot:rightText>
          <span>{{item.type}}</span>
        </template>
      </formItem>
      <formItem title="用途">
        <template v-slot:rightText>
          <span>{{item.class}}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="材料1">
        <template v-slot:rightFull>
          <div class="table-item-step-five">
            <div class="table-item-five-input">
              <el-input v-model="formObj.name" placeholder="请输入名称" type="text"/>
            </div>
            <div class="table-item-step-five-button">
              <el-button type="primary">上传</el-button>
              <el-button type="primary">下载</el-button>
              <el-button type="primary">浏览</el-button>
            </div>
          </div>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="材料2">
        <template v-slot:rightFull>
          <div class="table-item-step-five">
            <div class="table-item-five-input">
              <el-input v-model="formObj.name" placeholder="请输入名称" type="text"/>
            </div>
            <div class="table-item-step-five-button">
              <el-button type="primary">上传</el-button>
              <el-button type="primary">下载</el-button>
              <el-button type="primary">浏览</el-button>
            </div>
          </div>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="材料3">
        <template v-slot:rightFull>
          <div class="table-item-step-five">
            <div class="table-item-five-input">
              <el-input v-model="formObj.name" placeholder="请输入名称" type="text"/>
            </div>
            <div class="table-item-step-five-button">
              <el-button type="primary">上传</el-button>
              <el-button type="primary">下载</el-button>
              <el-button type="primary">浏览</el-button>
            </div>
          </div>
        </template>
      </formItem>
    </div>
  </div>
</template>
<script lang="ts">
import {reactive, defineComponent, getCurrentInstance, onMounted, watch, ref} from 'vue'
import formItem from "@/components/commonFomItem/index.vue";

export default defineComponent({
  components: {formItem},
  props: ['confirmState', 'index','PassState','Progress'],
  setup(props) {
    const progress = ref(props.Progress+1)
    const formObj = reactive([])
    const {appContext} = getCurrentInstance();
    //确定键
    watch(()=>props.confirmState,()=>{
      pushData()
    })
    const pushData=()=>{
      appContext.config.globalProperties.axios({
        url:`api/updatedeclare`,
        method: 'post',
        data:formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landid", props.index);
          oMyForm.append("bz", formObj[0].title);
          oMyForm.append("landloc", formObj[0].location);
          oMyForm.append("landarea", formObj[0].area);
          oMyForm.append("town", formObj[0].town);
          oMyForm.append("landtype", formObj[0].type);
          oMyForm.append("landclass", formObj[0].class);
          return oMyForm;
        }]
      }).then(() => {
        // console.log("OK")
      })
    }
    //通过键
    watch(()=>props.PassState,()=>{
      passData()
    })
    const passData=()=>{
      appContext.config.globalProperties.axios({
        url:`api/passland`,
        method: 'post',
        data:formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landid", props.index);
          oMyForm.append("bz", formObj[0].title);
          oMyForm.append("landloc", formObj[0].location);
          oMyForm.append("landarea", formObj[0].area);
          oMyForm.append("town", formObj[0].town);
          oMyForm.append("landtype", formObj[0].type);
          oMyForm.append("landclass", formObj[0].class);
          oMyForm.append("landstep", progress.value);
          return oMyForm;
        }]
      }).then(() => {
        // console.log("passOK")
      })
    }

    onMounted(() => {
      appContext.config.globalProperties.axios.post(`api/landSearch/${props.index}`).then((response) => {
        response.data.forEach(item => {
          let object: any = {}
          object.class = item.landType
          object.title = item.bz
          object.town = item.town
          object.location = item.landLoc
          object.area = item.landArea
          object.type = item.type
          formObj.push(object)
        })
      })
    })
    return {
      formObj,
      progress
    }
  }
})
</script>


<style scoped lang="scss">
.common-table {
  .table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-full-text {
      display: flex;
      width: 100%;
      align-items: center;

      .left {
        color: rgba(240, 245, 255, 0.95);
        padding-right: 10px;
        width: 61px;
      }

      .right {
        flex: 1;

        .red-line {
          display: flex;
          align-items: center;

          .red-line-text {
            padding-right: 12px;
          }
        }
      }
    }
  }

  .empty-form-item {
    width: 280px;
  }

  .tips-text {
    margin-left: 62px;
    margin-top: -16px;
  }

  .table-item-input-btn {
    position: relative;

    .float-btn {
      position: absolute;
      right: 2px;
      top: 0;
    }
  }
}

.table-item-step-five {
  display: flex;
  align-items: center;

  .table-item-five-input {
    width: 512px;
    padding-left: 16px;
  }

  .table-item-step-five-button {
    padding-left: 18px;
  }
}
</style>
